<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="select_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("状态") }}：</p>
        <el-select
          v-model="clientVal"
          :placeholder="$t('请选择')"
          @change="clientChange"
        >
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="getData('search')"
      >
        {{ $t("提交") }}
      </button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column
          prop="member_id"
          :label="$t('会员号')"
        ></el-table-column>
        <el-table-column prop="nick" :label="$t('用户昵称')"></el-table-column>
        <el-table-column prop="phone" :label="$t('手机号')"></el-table-column>
        <el-table-column
          prop="status_text"
          :label="$t('状态')"
        ></el-table-column>
        <el-table-column
          prop="create_time"
          :label="$t('提交时间')"
        ></el-table-column>
        <el-table-column
          prop="update_time"
          :label="$t('处理时间')"
        ></el-table-column>
        <el-table-column prop="content" :label="$t('内容')"></el-table-column>
        <el-table-column :label="$t('操作')" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleDetail(scope.row)"
              v-if="permissions.indexOf('/feedback/detail') != -1"
              >{{ $t("详情") }}</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="handleChange(scope.row)"
              v-if="
                permissions.indexOf('/feedback/process') != -1 &&
                  scope.row.status == 1
              "
              >{{ $t("处理") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      width="1000px"
      :title="$t('详情')"
      :visible.sync="showDetail"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="txt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("设备号") }}：</span>
          </p>
          <span class="font14 text_black">{{ device_code }}</span>
        </div>
        <div class="txt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("手机号") }}：</span>
          </p>
          <span class="font14 text_black">{{ phone }}</span>
        </div>
        <div class="img_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("设备图片") }}：</span>
          </p>
          <el-image
            v-for="(item, index) of imgList"
            :key="index"
            :src="item"
            :preview-src-list="imgList"
          ></el-image>
        </div>
        <div class="txt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("反馈内容") }}：</span>
          </p>
          <span class="font14 text_black">{{ feed_content }}</span>
        </div>
        <div
          class="txt_list u-f u-f-ac"
          v-if="!isHandle"
          style="margin-bottom: 30px;"
        >
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("处理结果") }}：</span>
          </p>
          <span class="font14 text_black">{{ feed_answer }}</span>
        </div>
        <div class="ipt_list u-f" v-if="isHandle">
          <p class="lable u-f">
            <span class="font14 text_black">{{ $t("处理结果") }}：</span>
          </p>
          <el-input
            v-model="feed_answer"
            autosize
            type="textarea"
            :placeholder="$t('请输入处理结果')"
          ></el-input>
        </div>
        <el-button type="primary" @click="submits" v-if="isHandle">{{
          $t("提交")
        }}</el-button>
      </div>
    </el-dialog>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "feedback-index",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("所有"),
        },
        {
          value: 1,
          label: that.$t("未处理"),
        },
        {
          value: 2,
          label: that.$t("已处理"),
        },
      ],
      tableData: [],
      showDetail: false,
      isHandle: false,
      feed_id: "",
      feed_content: "",
      feed_answer: "",
      device_code: "",
      phone: "",
      imgList: [],
    };
  },
  computed: {
    ...mapState(["permissions"]),
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1;
      this.page_size = 20;
      this.clientVal = 0;
      this.getData();
    },
    getData(type) {
      if (type == "search") {
        this.page = 1;
      }
      util
        .$http("/feedback/index?page=" + this.page, {
          page_size: this.page_size,
          status: this.clientVal,
        })
        .then((res) => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    clientChange(val) {
      this.clientVal = val;
    },
    handleChange(row) {
      this.showDetail = true;
      this.isHandle = true;
      setTimeout(() => {
        util
          .$http("/feedback/detail", {
            id: row.id,
          })
          .then((res) => {
            if (res.code == 1) {
              this.feed_id = res.data.id;
              this.feed_content = res.data.content;
              this.feed_answer = res.data.remark;
              this.device_code = res.data.device_code;
              this.phone = res.data.phone;
              this.imgList = res.data.images;
            }
          });
      }, 150);
    },
    submits() {
      util
        .$http("/feedback/process", {
          id: this.feed_id,
          remark: this.feed_answer,
        })
        .then((res) => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.feed_answer = "";
            this.showDetail = false;
            this.isHandle = false;
            this.getData();
          }
        });
    },
    handleDetail(row) {
      this.showDetail = true;
      this.isHandle = false;
      setTimeout(() => {
        util
          .$http("/feedback/detail", {
            id: row.id,
          })
          .then((res) => {
            if (res.code == 1) {
              this.feed_id = res.data.id;
              this.feed_content = res.data.content;
              this.feed_answer = res.data.remark;
              this.device_code = res.data.device_code;
              this.phone = res.data.phone;
              this.imgList = res.data.images;
            }
          });
      }, 150);
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 290px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail {
  padding-left: 50px;
}
.order_detail .txt_list {
  margin-bottom: 20px;
}
.order_detail .txt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .img_list {
  margin-bottom: 20px;
}
.order_detail .img_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .img_list .el-image {
  width: 100px;
  height: 100px;
  margin-right: 15px;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-textarea {
  width: 300px;
}
</style>
<style>
.order_detail .ipt_list .el-textarea__inner {
  min-height: 90px !important;
}
</style>
